<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :close-on-press-escape="false" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="checkForm">
        <el-form-item prop="name" :label="form.type == 'menu' ? '菜单名称':'按钮名称'" label-width="120px" required>
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item prop="type" label="类型选择" label-width="120px">
            <el-radio v-model="form.type" label="menu">菜单</el-radio>
            <el-radio v-model="form.type" label="button">按钮</el-radio>
        </el-form-item>
        <el-form-item prop="perms" label="权限标识" label-width="120px" :rules="[{ required: true, message: '请输入权限标识', trigger: 'blur' }]">
            <el-select v-model="form.perms" filterable allow-create default-first-option placeholder="请选择">
                <el-option
                        v-for="item in urlList"
                        :key="item.id"
                        :label="item.perms"
                        :value="item.perms">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item v-if="form.type == 'menu'" prop="url" label="URL" label-width="120px">
            <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item v-if="form.type == 'menu'" prop="icon" label="菜单图标" label-width="120px">
            <el-input v-model="form.icon"></el-input> 请到<a target="_blank" href="http://fontawesome.dashgame.com/">http://fontawesome.dashgame.com/</a>官网查询
        </el-form-item>
        <el-form-item prop="menuId" v-model="form.pid" label="上级菜单" label-width="120px">
            <el-tree :data="menuTree" ref="tree" highlight-current show-checkbox check-strictly
                     :default-checked-keys="form.pid"
                     :default-expanded-keys="form.pid"
                     node-key="id"
                     @check-change="checkChange"
                     :props="treeProps"></el-tree>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save('form')">确 定</el-button>
    </span>
</el-dialog>
